<template>
	<view>
		<navigator class="metro-item">
			<view class="path">{{detail.name}}</view>
			<view class="bottom">
				<view class="left center">
					<text>始发站：</text>
					<text>{{detail.first}}</text>
					<text>首班时间：{{detail.startTime}}</text>
				</view>
				<view class="right center">
					<text>终点站：</text>
					<text>{{detail.end}}</text>
					<text>末班时间: {{detail.endTime}}</text>
				</view>
			</view>
		</navigator>
		<view class="info">
			<view class="title2">站点信息</view>
			<scroll-view scroll-x="true">
				<u-steps :list="numList" :current="current"></u-steps>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: () => {},
				numList: [],
				current: 0
			};
		},
		onLoad(option) {
			this.getDetail(option.id)
		},
		methods: {
			getDetail(id){
				this.$request({
					url: '/prod-api/api/metro/line/' + id
				}).then(res => {
					console.log(res)
					this.detail = res.data
					this.numList = this.detail.metroStepList
					const runStationsName = this.detail.runStationsName
					console.log(runStationsName)
					this.current = this.numList.filter(item => item.name === runStationsName)[0].seq - 1
					console.log(this.current)
					uni.setNavigationBarTitle({
						title:this.detail.name
					})
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f7f7f7;
	view{
		padding: 20rpx;
		.metro-item{
			padding: 20rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			position: relative;
			.path{
				color: #2979ff;
				font-weight: bold;
				font-size: 36rpx;
				border-bottom: 4rpx solid #e4e7ed;
			}
			.bottom{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				.left{
					display: flex;
					flex-direction: column;
					:nth-child(2){
						color: #ff9900;
						font-size: 36rpx;
						font-weight: bold;
						padding: 10rpx;
					}
				}
				.right{
					display: flex;
					flex-direction: column;
					:nth-child(2){
						color: #fa3534;
						font-size: 36rpx;
						font-weight: bold;
						padding: 10rpx;
					}
				}
			}
		}
		.info{
			width: 100%;
			padding: 10rpx;
			background-color: #fff;
		}
	}
}
</style>
